<template>
    <div class="header">
        <div class="head">
            <div class="left">
                <h1>
                    <img src="../../../assets/img/logo.png" alt="">
                </h1>
            </div>
            <nav class="right" @click="menuBarShow">
                <img src="../../../assets/img/nav-icon-home-default.png" alt="">
            </nav>
        </div>
        <div class="navigation">
            <NavMove>
                <ul v-show="show_move">
                    <li :class="isActive">
                        <router-link to="/Home">首页</router-link>
                    </li>
                    <li :class="isActive_1">
                        <router-link to="/Strategy">策略优势</router-link>
                    </li>
                    <li :class="isActive_2">
                        <router-link to="/Resource">优质资源</router-link>
                    </li>
                    <li :class="isActive_3">
                        <router-link to="/Case">精选案例</router-link>
                    </li>
                    <li :class="isActive_4">
                        <router-link to="/AboutUs">关于我们</router-link>
                    </li>
                    <li :class="isActive_5">
                        <router-link to="/Product">指尖助手</router-link>
                    </li>
                </ul>
            </NavMove>
        </div>
    </div>
</template>
<script>
import NavMove from './NavMove.js'
export default {
    name: 'Header',
    data () {
        return {
            show_move: false
        }
    },
    props: ['colors'],
    components: {
        NavMove
    },
    computed: {
        isActive () {
            if (this.colors == "Home") {
                return {
                    active: true
                }
            }
            else {
                return {
                    avtive: false
                }
            }
        },
        isActive_1 () {
            if (this.colors == "Strategy") {
                return {
                    active: true
                }
            }
            else {
                return {
                    avtive: false
                }
            }
        },
        isActive_2 () {
            if (this.colors == "Resource") {
                return {
                    active: true
                }
            }
            else {
                return {
                    avtive: false
                }
            }
        },
        isActive_3 () {
            if (this.colors == "Case") {
                return {
                    active: true
                }
            }
            else {
                return {
                    avtive: false
                }
            }
        },
        isActive_4 () {
            if (this.colors == "AboutUs") {
                return {
                    active: true
                }
            }
            else {
                return {
                    avtive: false
                }
            }
        },
        isActive_5 () {
            if (this.colors == "Product") {
                return {
                    active: true
                }
            }
            else {
                return {
                    avtive: false
                }
            }
        }
    },
    methods: {
        menuBarShow () {
            this.show_move = !this.show_move
        }
    }
}
</script>
<style scoped>
.header {
    width: 100%;
}
.header .head {
    height: 88px;
}
.header .head .left {
    float: left;
    width: 164px;
    height: 80px;
    margin-left: 20px;
    position: relative;
}
.header .head .left img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.header .head .right {
    float: right;
    width: 50px;
    height: 50px;
    margin-right: 20px;
    position: relative;
    margin-top: 19px;
}
.header .head .right img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
}
.header .navigation {
    position: absolute;
    top: 85px;
    width: 100%;
}
.header .navigation ul li {
    font-size: 36px; /*px*/
    text-align: center;
    height: 80px;
    background-color: #F8F8F8;
    line-height: 80px;
    position: relative;
    border-bottom: 1px solid #D0D0D0; /*no*/
}
.header .navigation ul li:nth-child(1) {
    border-top: 1px solid #D0D0D0; /*no*/
}
.header .navigation ul li:nth-child(6) {
    border-bottom: transparent;
}
.header .navigation ul li a {
    color: #05173b;
    text-decoration: none;
    width: 100%;
    display: inline-block;
}
.header .navigation ul .active {
    background-color: #1e90ff;
}
.header .navigation ul .active a {
    color: #fff;
}
/* @keyframes top_move {
    from {
        top: 0;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
} */
/* .right_move-enter-active {
    animation: right_move 1s both;
}
.right_move-leave-active {
    animation: right_move 1s .5s both reverse;
}
.right_move_1-enter-active {
    animation: right_move 1s .1s both;
}
.right_move_1-leave-active {
    animation: right_move 1s .4s both reverse;
}
.right_move_2-enter-active {
    animation: right_move 1s .2s both;
}
.right_move_2-leave-active {
    animation: right_move 1s .3s both reverse;
}
.right_move_3-enter-active {
    animation: right_move 1s .3s both;
}
.right_move_3-leave-active {
    animation: right_move 1s .2s both reverse;
}
.right_move_4-enter-active {
    animation: right_move 1s .4s both;
}
.right_move_4-leave-active {
    animation: right_move 1s .1s both reverse;
}
.right_move_5-enter-active {
    animation: right_move 1s .5s both;
}
.right_move_5-leave-active {
    animation: right_move 1s both reverse;
} */
.right_move-enter-active {
    transition: all 1s ease;
}
.right_move-leave-active {
    transition: all 1s ease;
}
.right_move-leave-to {
    transform: translate3d(0, 1rem, 0);
    opacity: 0;
}
</style>
